<template>
<view class="ua__table" :style="[{width: width, height: height}]">
<view class="ua__table-thead" :style="{'background': headerBgColor}">
	<view v-for="(item,index) in columns" :key="index" class="ua__thead-th" :class="{'fixedLeft': item.fixed == true || item.fiexed=='left','fixedRight': item.fixed == 'right'}"
			:style="{
		'background': item.bgcolor || headerBgColor,'color': headerColor,'text-align': item.align || 'left','justify-content': item.align == 'center' ? 'center' : item.align == 'left' ? 'flex-start' : 'flex-end','width': item.width ? item.width + 'rpx' : columnWidth,'font-size': size,'font-weight': headerBold ? 'bold' : 'normal','padding': padding,'left': (item.fixed == true || item.fixed == 'left') ? index == 0 ? 0 : index == 1 ? (columns[0].width+'rpx' || columnWidth) : 'auto' : 'auto','right': item.fixed == 'right' ? index == columns.length-1 ? 0 : index == columns.length-2 ? (columns[columns.length-1].width+'rpx' || columnWidth) : 'auto' : 'auto',
				}"
			>
<block v-if="item.type == 'selection'"><checkbox class="chkbox chkall" :checked="isChkAll" @click.stop="handleChkAll" /></block>
<block v-else-if="item.type == 'index'">{{item.label || '序号'}}</block>
	<block v-else>{{item.label}}</block>
</view>
</view>
	<view class="ua__table-tbody">
	<view v-for="(row,rIndex) in data" :key="rIndex" class="ua__tbody-tr" :class="{'striped': stripe&&rIndex%2==1}" :style="{'background': bodyBgColor}">
	<view v-for="(col,cIndex) in columns" :key="cIndex" class="ua__tbody-td" 
		:class="{'fixedLeft': col.fixed == true || col.fiexed=='left','fixedRight': col.fixed == 'right'}"
			:style="{
				'background': col.bgcolor || 'inherit','text-align': col.align || 'left','justify-content': col.align == 'center' ? 'center' : col.align == 'left' ? 'flex-start' : 'flex-end','width': col.width ? col.width + 'rpx' : columnWidth,'font-size': size,'padding': padding,'left': (col.fixed == true || col.fixed == 'left') ? cIndex == 0 ? 0 : cIndex == 1 ? (columns[0].width+'rpx' || columnWidth) : 'auto' : 'auto','right': col.fixed == 'right' ? cIndex == columns.length-1 ? 0 : cIndex == columns.length-2 ? (columns[columns.length-1].width+'rpx' || columnWidth) : 'auto' : 'auto',
					}"
	@click.stop="clickRow(rIndex, cIndex)"
				>
	<block v-if="col.type == 'selection'"><checkbox class="chkbox chkitem" :checked="row.checked" @click.stop="handleChkItem(rIndex)" /></block>
		<block v-else-if="col.type == 'index'">{{rIndex + 1}}</block>
		<block v-else>{{row[col.prop]}}</block>
	<block v-if="col.slot"><slot :row="row" :col="col" :index="rIndex" /></block>
</view>
	</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
		type: Array,
			default() {
				return []
			}
			},
			/**
	 * 列参数配置
			 */
			columns: {
			type: Array,
			default() {
			return []
				}
			},
		width: { type: String, default: 'auto' },height: { type: String, default: 'auto' },
			// 是否为斑马纹
			stripe: { type: Boolean, default: false },
		size: { type: String, default: '30rpx' },
		padding: { type: String, default: '5rpx 10rpx' },
			// 列宽度
	columnWidth: { type: String, default: '200rpx' },
		headerColor: { type: String, default: '#333' },headerBgColor: { type: String, default: '#f3f6f9' },headerBold: { type: Boolean, default: true },bodyBgColor: { type: String, default: '#fff' },
		emptyText: { type: String, default: '-' },emptyData: { type: String, default: '暂无数据' }
		},
		data() {
			return {
			isChkAll: false,event: {data: []}
			}
		},
		mounted() {
		this.data.map(item => {
			this.$set(item, 'checked', false)
			})
		},
		methods: {
			clickRow(rIndex, cIndex) {
				let eventData = {}
			let col = this.columns[cIndex]
			let row = this.data[rIndex]
				eventData = {
			content: row[col.prop] || '',rowIndex: rIndex,colLabel: col.label,colIndex: cIndex,key: col.prop,rowData: row
				}
			this.$emit('row-click', eventData)
		},
			
		handleChkAll() {
			let list = this.data
		this.isChkAll = !this.isChkAll
			for(var i = 0; i < list.length; i++) {
		list[i].checked = this.isChkAll
				}
			this.data = list
			if(!this.isChkAll) {
			this.event.data = []
				}else {
			this.event.data = []
					this.data.map((item, index) => {
				this.event.data.push({
				index,rowData: item
			})
			})
				}
		this.$emit('select', this.event)
	},
		handleChkItem(index) {
		this.data[index].checked = !this.data[index].checked
				let total = 0
			for(var i = 0; i < this.data.length; i++) {
			if(this.data[i].checked) {
				total++
					}
			}
			// 控制全选/反选
		if(this.data.length == total) {
			this.isChkAll = true
				}else {
		this.isChkAll = false
				}
		this.event.data = []
		this.data.map((item, index) => {
			if(item.checked) {
			this.event.data.push({
				index,rowData: item
				})
			}
		})
	this.$emit('select', this.event)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.ua__table {
	overflow: auto;
	.ua__table-thead {
		display: grid; grid-auto-flow: column; position: sticky; top: 0; z-index: 101;
		.ua__thead-th {display: flex; align-items: center;}
		}
	.ua__table-tbody {
		.ua__tbody-tr {
	display: grid; grid-auto-flow: column; position: relative;
		&.striped {background: #f3f6f9!important;}
			}
	.ua__tbody-td {display: flex; align-items: center;}
		}
	.chkbox {transform: scale(.8);}
.fixedLeft {position: sticky; left: 0; z-index: 100;}
	.fixedRight {position: sticky; right: 0; z-index: 100;}
	}
</style>
